<template>
    <div>
        <Form :label-width="80" :model="user" class="form" ref="user">
            <FormItem label="用户姓名" prop="name">
                <Input class="ipt" placeholder="请输入用户姓名" v-model="user.name" readonly/>
            </FormItem>
            <FormItem label="登录账号" prop="username">
                <Input class="ipt" placeholder="请输入用户登录账号" v-model="user.username" readonly/>
            </FormItem>
            <FormItem label="用户角色" prop="role">
                <Input class="ipt" placeholder="请输入用户登录账号" v-model="user.role" readonly/>
            </FormItem>
            <FormItem label="用户角色" prop="role">
                <Select class="ipt" placeholder="请选择" v-model="user.status">
                    <Option :value="0">启用</Option>
                    <Option :value="-1">禁用</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Button @click="handleSubmit('user')" type="primary" v-has="this.$res.updateUser">修改</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    export default {
        name: 'editUser',
        metaInfo: {
            title: '编辑用户信息',
        },
        data() {
            return {
                user: {
                    id: '',
                    name: '',
                    mobile: '',
                    username: '',
                    email: '',
                    password: '',
                    role: '',
                    status: ''
                },
            }
        },
        mounted() {
            this.getUser();
        },
        methods: {
            getUser: function () {
                this.$kit.ajaxGet(this.$res.getUser, {id: this.$route.query.userId}, (res) => {
                    this.user = res.data.data
                }, this)
            },
            handleSubmit: function () {
                this.$kit.ajaxPut(this.$res.updateUser, this.user, (res => {
                    this.$Message.success(res.data.msg)
                }), this)
            },
        },
    }
</script>

<style scoped>
    .ipt {
        width: 500px;
    }

    .form {
        margin: 60px 0 10px 200px;
    }
</style>
